<script setup lang="ts">
import type { SysFile, SysFileQuery } from '@/apis/system/sysFileApi'
import type { DataAction } from '@/components/DataForm/types'
import { FullScreen, Refresh } from '@element-plus/icons-vue'
import { Icon } from '@iconify/vue'
import { reactive, ref } from 'vue'
import { sysFileApi } from '@/apis/system/sysFileApi'
import { useTable } from '@/components/DataPage/useTable'
import BaseCard from '@/layouts/BaseCard.vue'
import SysFileUploadDialog from './SysFileUploadDialog.vue'

const {
  submitQuery,
  QueryForm,
  Table,
  TableFieldFilterButton,
} = useTable<SysFileQuery, SysFile>({
  autoQuery: true,
  queryPage: sysFileApi.queryPage,
  queryFields: [
    { title: 'ID', name: 'id' },
    { title: '文件分组', name: 'fileGroup', dict: 'FILE_GROUP' },
    { title: '文件名', name: 'fileName' },
  ],
  tableFields: [
    { title: 'ID', name: 'id', width: 80, columnType: 'KEY', sort: true },
    { title: '文件分组', name: 'fileGroup', width: 90, sort: false, align: 'center', dict: 'FILE_GROUP' },
    { title: '文件', name: 'fileName', width: 120, sort: false, align: 'center' },
    { title: '文件路径', name: 'filePath', width: 100, sort: false },
    { title: '内容类型', name: 'contentType', width: 100, sort: false, align: 'center' },
    { title: '文件md5', name: 'fileMd5', width: 100, sort: false },
    { title: '文件大小', name: 'fileSize', width: 100, sort: true },
    { title: '更新时间', name: 'updateTime', width: 180, columnFilter: false },
  ],
})
const uploadDialogRef = ref<InstanceType<typeof SysFileUploadDialog>>()

const actions = reactive<Record<string, DataAction>>({
  upload: {
    label: '上传',
    type: 'primary',
    click: () => uploadDialogRef.value?.show(),
  },
  download: {
    label: '下载',
    type: 'primary',
    click: data => sysFileApi.download(data.id),
  },
  remove: {
    label: '删除',
    type: 'danger',
    authCode: 'system:file:remove',
    confirm: '删除不可恢复，请谨慎确认',
    click: data => sysFileApi.remove(data.id),
    success: () => submitQuery(),
    message: true,
  },
})
</script>

<template>
  <BaseCard title="查询条件">
    <QueryForm />
  </BaseCard>
  <BaseCard title="数据列表" class="mt-2">
    <template #buttons>
      <!-- 表格按钮 -->
      <data-button :action="actions.upload" />
      <el-button :icon="Refresh" circle @click="submitQuery()" />
      <el-button :icon="FullScreen" circle />
      <TableFieldFilterButton />
    </template>
    <!-- 数据表格 -->
    <Table
      :row-actions="[actions.download, actions.remove]"
      @change="submitQuery()"
    >
      <template #fileName="{ row }">
        <el-image v-if="row.contentType?.startsWith('image/')" :src="row.fileUrl" style="width: 100px; height: 100px">
          <template #error>
            <div class="h-full flex flex-row items-center justify-center text-2xl">
              <Icon icon="tdesign:image-error" />
            </div>
          </template>
        </el-image>
        <template v-else>
          {{ row.fileName }}
        </template>
      </template>
    </Table>
  </BaseCard>

  <SysFileUploadDialog ref="uploadDialogRef" @on-upload-success="submitQuery(1)" />
</template>
